<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>坤坤酷跑主游戏界面</title>
    <link rel = "stylesheet" type = "text/css" href = "game.css">
  </head>
  <body>
    <div id = "game">
        <div id = "ikun">
            <img src = "ikun.png">
        </div>
        <div id = "blacker">
            <img src = "enemy.png">
        </div>
    </div>
    <hr>
    <h2>按任意键跳跃，小黑子随时可能发起攻击，注意躲避!!!</h2>
    <br>
    <h3>游戏架构：花下的晚风</h3>
    <h3>美术：花下的晚风</h3>
    <h3>开发：花下的晚风</h3>
    <h3>测试：花下的晚风</h3>
    <script>
      const ikun = document.querySelector("#ikun")
      const blacker = document.querySelector("#blacker")
      //开启跳跃动画和结束跳跃动画
      window.addEventListener('keydown',event => {
        // console.log("a");
        ikun.classList.add("jumpclass")
        setTimeout(() => {
          ikun.classList.remove("jumpclass");
        }, 300);
      });
      //设置碰撞
      setInterval(()=>{
        const ikunBottom = parseFloat(
          getComputedStyle(ikun).getPropertyValue("bottom")
        );
        const blackerLeft = parseFloat(
          getComputedStyle(blacker).getPropertyValue("left")
        );
        if(blackerLeft < 20 && blackerLeft > -20 && ikunBottom <= 20){
          alert("你干嘛~~~~~~嗨嗨哎哟~~~~~~！");
        }

      },10);
    </script>
    <!-- 随机出现敌人 -->
    <script>
      var blacker2 = document.getElementById('blacker'); // 修改为 blacker2
      function playAnimation() {
          // 移除动画
          blacker2.style.animation = 'none';
  
          // 重新设置 left 到起始位置
          blacker2.style.left = '850px';
  
          // 重新添加动画
          setTimeout(function() {
              blacker2.style.animation = 'blacker 1s linear forwards';/*将时间调小可以增加难度*/
          }, getRandomWaitTime());
      }
  
      // 随机等待时间函数，返回一个随机的毫秒值
      function getRandomWaitTime() {
          return Math.floor(Math.random() * 5000) + 1000; // 1000ms 到 6000ms 之间的随机值
      }
  
      // 监听动画结束事件
      blacker2.addEventListener('animationend', function() {
          playAnimation();
      });
  
      // 初始播放动画
      playAnimation();
      var blacker2 = document.getElementById('blacker');
  </script>
  </body>
</html>